{#该页面在base.html基础上继承#}
{% extends 'visites/include/base.html' %}
{#引入static文件#}
{% load staticfiles %}
{#对应base.html里block内需要填入的内容#}
{% block content %}
<script src="{% static 'visites/js/jquery.min.js' %}"></script>
    <p hidden="hidden" >{% csrf_token %}</p>
    {#    base.html里的block从topbar之后开始，所以这里我们找到该页面topbar下面对应的标签#}
    <div class="page-content-wrapper">
        <div class="container-fluid">
            <div class="table-outside">
                <a href="add-menu" class="btn btn-info none-radius" style="margin-bottom: 30px">新增菜谱</a>
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>状态</th>
                        <th>期数</th>
                        <th>社区</th>
                        <th>订购时间</th>
                        <th>配送时间</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in cookbook %}
                    <tr>
                        <td>{{forloop.counter}}</td>
                        {% if item.status == 'Open'%}
                            <td>正在进行</td>
                        {% else %}
                            <td>订单结束</td>
                        {% endif %}
                        <td>{{ item.period_number }}</td>
                        <td>{{ item.community_name }}</td>
                        <td>{{ item.order_time }}</td>
                        <td>{{ item.delivery_time }}</td>
                        <td>
                            <a href="menu-detail?id={{ item.id}}" class="btn btn-info none-radius">查看详情</a>
                            <button data-id="{{ item.id}}" data-status="{{ item.status }}"  class="btn btn-danger none-radius cookbookClose">关闭菜谱</button>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="row order-page">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        {% if cookbook.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1" aria-label="Previous">首页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ cookbook.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        {% endif %}
                        {% for pg in cookbook.paginator.page_range %}
                            {% if cookbook.number == pg %}
                                <li class="active "><a class="page-link" href="?page={{ pg }}">{{ pg }}</a></li>
                            {% else %}
                                {% if pg == '...' %}
                                    <li><span class="page-link">{{ pg }}</span></li>
                                {% else %}
                                    <li><a class="page-link" href="?page={{ pg }}">{{ pg }}</a></li>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        {% if cookbook.has_next %}
                        <li>
                            <a class="page-link" href="?page={{ cookbook.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ cookbook.paginator.num_pages}}" aria-label="Next">尾页</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
<script>
//前台状态初始设置
$(".table button").each(function(){
    var status = $(this).attr("data-status");
    if(status == 'Open'){
        $(this).removeClass('btn-primary').addClass('btn-primary').html('关闭菜谱');
    }
    else {
        $(this).removeClass('btn-dark').addClass('btn-dark').html('开启菜谱');
    }
});
$(".cookbookClose").on("click",function (){
    var id = $(this).attr("data-id");
    $.ajax({
        url: 'changeCookbookStatus',
        type: 'POST',
        data: {
            id: id,
        },
        success : function(data) {
                if(data=1){
                    alert("菜谱状态已变更!");
                    window.location.reload();
                }
        }
    });
})
</script>

{#    为了加快前端页面的加载速度我们一般把JS引入写到页面的最底端#}
{% endblock %}